<template>
	<view>
		<u-navbar back-text="" title="实验数据详情"></u-navbar>
		<!-- <zx-head Title="实验数据详情" :isShowR="false"></zx-head> -->
		<view class="con">
			<view class="box1 _df _ac _jb mb60">
				<view class="text">
					<view class="title">
						AI抑郁症检测
					</view>
					<view class="info">
						医生：王耀威 | 2024.07.04
					</view>
				</view>
				<view class="dropdown" @click="show = true">
					{{value1}}<u-icon class="ml30" size="18" name="arrow-down-fill"></u-icon>
				<u-select z-index="9999999" v-model="show" :list="options1" @confirm="confirm"></u-select>
				</view>
				
			</view>
			<view class="box2">
				<view class="title _df _ac">
					<image src="@/static/img/index/qxIcon2.png" mode=""></image>
					视频
				</view>
				<view class="video-box">
					<video :src="src"></video>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				value1:'正性-快乐-1',
				options1: [{
						label: '正性-快乐-1',
						value: 1,
					},
					{
						label: '正性-快乐-3',
						value: 2,
					},
					{
						label: '正性-快乐-4',
						value: 3,
					}
				],
				show:false,
				src:"https://ynuzxapi.healthycare.space/admin/app/video/ffmpeg/ers_1838432258415923260/index.m3u8?MenuId=1791770339538112512&Authorization=Bearer%20eyJhbGciOiJIUzI1NiJ9.eyJzZXNzaW9uSWQiOiJhZG1pbl80XzdkM2RiOWYyZDQ5NDQwNzY5OGEyZjdhMWM5NTY5NGQ2IiwiQ3JlYXRlZFRpbWUiOjE3Mjk3NjczNTA0NzgsImV4cCI6MTcyOTgzOTM1MH0.wihMTBparzgoc1tZ9SHDWk0pDODjlZw-aQSw7jS_6QI"
			};
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods:{
			confirm(e){
				
			},
			timeupdate(e){
			
			}
		},
	}
</script>

<style lang="scss" scoped>
.con {
	padding: 50rpx 30rpx;
	.box1{
		.title{
			font-size: 32rpx;
			font-family: $uni-font-family-Bold;
			color: #222;
			margin-bottom: 8rpx;
		}
		.info{
			font-size: 22rpx;
			color: #aaa;
		}
		.dropdown{
			padding: 0 30rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #eff3ff;
			border: 1rpx solid #6387ff;
			border-radius: 35rpx;
			font-size: 26rpx;
			color: #6387ff;
			text-align: center;
		}
	}
	.box2 {
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.10);
		padding: 40rpx 30rpx 40rpx;
		margin-bottom: 30rpx;
	
		.title {
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #eee;
			color: #171717;
			font-family: $uni-font-family-Bold;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}
		.video-box{
			width: 100%;
			border-radius: 20rpx;
			height: 970rpx;
			position: relative;
			z-index: 1 !important;
			overflow: hidden;
			// &:before{
			// 	display: block;
			// 	content: '';
			// 	width: 100%;
			// 	height: 100%;
			// 	background: rgba(0,0,0,0.25) url(@/static/img/index/play1.png) no-repeat center center / 120rpx 120rpx;
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	z-index: 2;
			// }
			video{
				width: 100% !important;
				height: 100% !important;
				z-index: 1 !important;
				position: relative;
			}
			
		}
		#sunnyVideo{
			width: 100% !important;
			height: 100% !important;
		}
	}
}
</style>
